<template>
	<view>
		<mosowe-swiper
		    :lists="posters"
		    :touchable="false"
		    indicator="dots"
		    imageKey="image"
		    previewImage
		    pyramid
		    pyramidMargin="90rpx"
		    />
		<helang-picker-color :bottom="0" :isShow="selingColor"></helang-picker-color>
		<ad style="height: 200rpx;background-color: gray;margin-top: 10rpx;"></ad>
		<view style="display: flex;align-items: center;">
			<view style="flex-grow: 0;flex-shrink: 0;width:5em;">你的名字：</view>
			<input maxlength="5" placeholder="请输入你的名字,不多于5个字" class="capsule" style="flex-grow: 1;flex-shrink: 1;text-align: center;" type="text" v-model="post.name" />
		</view>
		<hg-select :items="types" v-model="post.type" :searchable="false" :clearable="false"></hg-select>
		
		<view class="options">
			<view class="option">
				<label class="option-label">颜色：</label>
				<view style="height:1.5em" class="option-content" :style="{backgroundColor: post.options.color}" @click="selingColor=true"></view>
			</view>
			<view class="hr"></view>
			<view class="option">
				<label class="option-label">大小：</label>
				<slider class="option-content" min="10" max="99" value="30"/>
				<input type="number" v-model="post.options.size" style="width: 50rpx;" />
			</view>
			<view class="hr"></view>
			<view class="option">
				<label class="option-label">方向：</label>
			</view>
			<view class="option">
				<label class="option-label">粗细：</label>
				<slider class="option-content" min="1" max="50" value="3"/>
				<input type="number" v-model="post.options.width" style="width: 50rpx;" />
			</view>
			<view class="hr"></view>
			<view class="option">
				<label class="option-label">字间距：</label>
				<slider class="option-content" min="1" max="50" value="3"/>
				<input type="number" v-model="post.options.gap" style="width: 50rpx;" />
			</view>
			<view class="hr"></view>
			<view class="option">
				<label class="option-label">倾斜度：</label>
				<slider class="option-content" min="1" max="50" value="3"/>
				<input type="number" v-model="post.options.skew" style="width: 50rpx;" />
			</view>
		</view>
		
		<button class="bottom capsule" type="primary" size="mini" style="display: block;border: none;">生成签名</button>
	</view>
</template>

<script>
	import mosoweSwiper from '@/components/mosowe-swiper/mosowe-swiper.vue'
	import hgSelect from '@/components/hg-select/hg-select.vue'
	import helangPickerColor from '@/components/helang-pickerColor/helang-pickerColor.vue'
	
	export default {
		components:{
			mosoweSwiper, hgSelect, helangPickerColor, 
		},
		data() {
			return {
				posters:[								// 轮播广告
					{
					        image: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3892521478,1695688217&fm=26&gp=0.jpg',
					    },
					    {
					        image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595526004030&di=4be554bfcbc76570e275724fd10cb11c&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F36%2F48%2F19300001357258133412489354717.jpg',
					    },
					    {
					        image: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595526004029&di=2feebadbbdcf7db486a58ce72d5a263b&imgtype=0&src=http%3A%2F%2Fp2.so.qhimgs1.com%2Ft01dfcbc38578dac4c2.jpg'
					    }
				],
				types:[									// 签名类型
					{value: '花式签名'},
					{value: '商务签名'},
					{value: '个性签名'},
					{value: '潇洒签名'},
					{value: '楷体签名'},
					{value: '医用签名'},
					{value: '卡通签名'},
					{value: '连笔签名'},
					{value: '随机签名'},
				],
				selingColor: false,
				post:{
					name: '',
					type: 0,			// 签名类型
					options:{
						color:'#000',
						size: 30,
						width: 3,
						gap:5,
						dir:'',
						skew: 0,
					}
				}
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.bottom{
		position: absolute;
		
		left: 0;
		right:0;
		bottom: 0;
		
		z-index: 999;
	}
	
	.hr{
		height: 0;
		
		margin: 10rpx 0;
		
		color: gray;
		
		border-bottom: solid 1px gray
	}
	
	.options{
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}
	
	.options .option{
		display: flex;
		line-height: 2em;
		
		align-items: center;
	}
	
	.options .option-label{
		flex-grow: 0;
		flex-shrink: 0;
		
		width: 5em;
	}
	
	.options .option-content{
		flex-grow: 1;
		flex-shrink: 1;
	}
	
	.capsule{
		border: solid 1px gray;
		
		border-radius: 999em;
		
		padding: 10rpx 20rpx
	}
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
